<div id="innerContainer">
    <div class="row">
        <div class="col-xs-10">
            <div class="form-body">
                <form id="frmWifiSwitch" role="form">
                    <div class="form-title" data-trans="wifi_basic"></div>
                    <div class="content margin-top-20">
                        <div class="row-fluid" data-bind="visible: hasWifiSwitch">
                            <label class="span5 side-right" data-trans="wifi_switch"></label>
                            <div class="span4 side-left">
                                <div class="row">
                                    <div class="span5">
                                        <input type="radio" name="wifi_switch" id="wifi_switch_enable" data-bind="checked: wifi_enable" value="1" />
                                        <label for="wifi_switch_enable" data-trans="enable"></label>
                                    </div>
                                    <div class="span5">
                                        <input type="radio" name="wifi_switch" id="wifi_switch_disable" data-bind="checked: wifi_enable" value="0" />
                                        <label for="wifi_switch_disable" data-trans="disable"></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row-fluid" data-bind="visible: wifi_enable() == '1' && hasMultiSSID">
                            <label class="span5 side-right" data-trans="multi_ssid_enable"></label>
                            <div class="span4 side-left">
                                <div class="row">
                                    <div class="span5">
                                        <input type="radio" name="multi_ssid_switch" id="multi_ssid_switch_enable" data-bind="checked: multi_ssid_enable" value="1" />
                                        <label for="multi_ssid_switch_enable" data-trans="enable"></label>
                                    </div>
                                    <div class="span5">
                                        <input type="radio" name="multi_ssid_switch" id="multi_ssid_switch_disable" data-bind="checked: multi_ssid_enable" value="0" />
                                        <label for="multi_ssid_switch_disable" data-trans="disable"></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-buttons" data-bind="visible: hasWifiSwitch || (wifi_enable() == '1' && hasMultiSSID)">
                            <input id="wifi_switch_apply" type="submit" class="btn-1" data-trans='apply' />
                            <input id="wifi_switch_cancel" type="button" class="btn-1 " data-bind='click: function(){clear("switch");}' data-trans='cancel' />
                        </div>
                    </div>
                </form>

                <div data-bind="visible: isShowSSIDInfoDiv">
                    <form id="frmSSID1">
                        <div class="form-title" data-bind="attr:{'data-trans': hasMultiSSID ? 'multi_ssid_1':'ssid_title'}"></div>
                        <div class="content">
                            <div class="row-fluid">
                                <span class="span5 side-right">
                                    <label for="ssid" data-trans="network_name"></label>
                                    <i class="colorRed">*</i>
                                </span>
                                <div class="span4 side-left">
                                    <input type="text" name="ssid" data-bind="value: ssid" id="ssid" class="required form-control" maxlength="32" />
                                </div>
                            </div>
                            <div class="row-fluid">
                                <label class="span5 side-right" data-trans="network_name_broadcast"></label>
                                <div class="span4 side-left">
                                    <div class="span5">
                                        <input type="radio" name="show_network_name_switch" id="show_network_name_switch_enable" data-bind="checked: broadcast" value="0" />
                                        <label for="show_network_name_switch_enable" data-trans="enable"></label>
                                    </div>
                                    <div class="span5">
                                        <input type="radio" name="show_network_name_switch" id="show_network_name_switch_disable" data-bind="checked: broadcast" value="1" />
                                        <label for="show_network_name_switch_disable" data-trans="disable"></label>
                                    </div>

                                    <input style="display:none;" id="broadcastCheckbox" name="broadcastCheckbox" type="checkbox" data-bind="checked: broadcast() == '0'" value="1" />
                                </div>
                            </div>
                            <div class="row-fluid" data-bind="visible: showIsolated">
                                <label class="span5"></label>
                                <div class="col-xs-8">
                                    <p class="checkbox" data-bind="css:{'checkbox_selected': apIsolation() == 1}">
                                        <input id="apisolatedCheckbox" name="apisolatedCheckbox" type="checkbox" data-bind="checked: apIsolation() == 1" value="1" />
                                    </p>
                                    <label data-trans="wifi_isolated_desc"></label>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <label class="span5 side-right" for='mode' data-trans='security_mode'></label>
                                <div class="span4 side-left">
                                    <select data-transid='security_mode' id="mode" class="form-control" data-bind="options: modes, value: selectedMode, optionsText: transOption('security_mode'), optionsValue: 'value'"></select>
                                </div>
                            </div>

                            <div class="row-fluid" data-bind='visible: selectedMode() == "OPEN" && hasWifiWep'>
                                <label class="span5 side-right" for='selEncryptType' data-trans='ap_station_encrypt_type'></label>
                                <div class="span4 side-left">
                                    <select id="selEncryptType" class="form-control" data-bind="value: encryptType,optionsValue: 'value'">
                                        <option value="NONE" data-trans="ap_station_encrypt_type_none"></option>
                                        <option value="WEP" data-trans="ap_station_encrypt_type_wep"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="row-fluid" data-bind='visible:  (selectedMode() == "OPEN" && encryptType() == "WEP" && hasWifiWep) || (selectedMode() == "SHARED" && hasWifiWep)'>
                                <label class="span5 side-right" for='selWepKeyType' data-trans='ap_station_wep_default_key'></label>
                                <div class="span4 side-left">
                                    <select id="selWepKeyType" class="form-control" data-bind="value: keyID,optionsValue: 'value', event:{ change: profileChangeHandler}">
							<option value="0" data-trans="ap_station_wep_key_0"></option>
							<option value="1" data-trans="ap_station_wep_key_1"></option>
							<option value="2" data-trans="ap_station_wep_key_2"></option>
							<option value="3" data-trans="ap_station_wep_key_3"></option>
						</select>
                                </div>
                            </div>
                            <div class="row-fluid" data-bind='visible: (selectedMode() == "OPEN" && encryptType() == "WEP" && hasWifiWep) || (selectedMode() == "SHARED" && hasWifiWep)'>
                                <label class="span5 side-right" for='pwdWepKey' data-trans='ap_station_wep_key'></label>
                                <div class="span4 side-left">
                                    <input id='pwdWepKey' name="pwdWepKey" type="password" class="required form-control" data-bind="value: wepPassword,visible:!showPassword()" maxlength='26' />
                                    <input id='txtWepKey' name="txtWepKey" type="text" class="required form-control" data-bind="value: wepPassword,visible:showPassword()" maxlength='26' />
                                    <div class="margin-top-10">
                                        <p class="checkbox" data-bind="css:{'checkbox_selected': showPassword()}, click: showPasswordHandler" manualControl="true">
                                            <input id="showWepPassword" type="checkbox" data-bind="checked:showPassword" />
                                        </p>
                                        <label class="floatleft margintop5 lineheight25" for="showWepPassword" data-trans="display_password" />
                                    </div>
                                    <div id="lblShowWepPassword" class="clear"></div>
                                </div>
                            </div>
                            <div id="passwordContainer" class="row-fluid" data-bind='visible: selectedMode() == "WPA2PSK" || selectedMode() == "WPAPSKWPA2PSK"'>
                                <span class="span5 side-right">
                                    <label for='txtWPAKey' data-trans='pass_phrase'></label>
                                    <i class="colorRed">*</i>
                                </span>

                                <div class="span4 side-left">
                                    <input id='pwdWPAKey' name="pwdWPAKey" type="password" data-bind="value: passPhrase,visible:!showPassword()" class="required form-control" minlength='8' maxlength='63' />
                                    <input id='txtWPAKey' name="txtWPAKey" type="text" data-bind="value: passPhrase,visible:showPassword()" class="required form-control" minlength='8' maxlength='63' />
                                    <div class="margin-top-10">
                                        <p class="checkbox" data-bind="css:{'checkbox_selected': showPassword()}, click: showPasswordHandler" manualControl="true">
                                            <input id="showPassword" type="checkbox" data-bind="checked:showPassword" />
                                        </p>
                                        <label class="lineheight25 margintop5" data-trans="display_password"></label>
                                    </div>
                                    <div id="lblshowWPAPassword" class="clear"></div>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <label class="span5 side-right"></label>
                                <div class="span4 side-left">
                                    <div class="margin-top-10" data-bind="visible: showQRSwitch">
                                        <p class="checkbox" data-bind="css:{'checkbox_selected': showQR()}, click: showQRHandler" manualControl="true">
                                            <input id="showQR" type="checkbox" data-bind="checked:showQR" />
                                        </p>
                                        <label class="lineheight25 margintop5" data-trans="display_QR"></label>
                                    </div>
                                    <div id="h_qrcode" data-bind="visible: showQRCode">
                                        <img width="111" id="qrcode_img" data-bind="attr: {src: qrcodeSrc}" />
                                    </div>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <label class="span5 side-right" for="maxStation" data-trans="max_station_number"></label>

                                <div class="span4 side-left">
                                    <select name="maxStation" id="maxStation" class="form-control" data-bind="options: maxStations, value: selectedStation, optionsText: 'text', optionsValue: 'value'"></select>
                                </div>
                            </div>

                        </div>
                        <div class="form-buttons">
                            <input id="ssid1_apply" type="submit" class="btn-1" data-trans='apply' data-bind="disable: (adBand()=='b' && adMode() == '2' && selectedMode() == 'SHARED') || (adBand()=='b' && adMode() == '2' && selectedMode() == 'OPEN' && encryptType() == 'WEP')" />
                            <input id="ssid1_cancel" type="button" class="btn-1 " data-bind='click: function(){clear("ssid1");}' data-trans='cancel' />
                        </div>
                    </form>
                </div>

                <div data-bind="visible: isShowSSIDInfoDiv">
                    <!-- <div data-bind="visible:origin_multi_ssid_enable!='1'|| !hasMultiSSID" data-trans="wif_guest_disabled"></div> -->
                    <form id="frmSSID2" data-bind="visible:origin_multi_ssid_enable=='1'&& hasMultiSSID">
                        <div class="form-title" data-bind="attr:{'data-trans': 'multi_ssid_2'}"></div>
                        <div class="content">
                            <div class="row-fluid">
                                <span class="span5 side-right">
                                    <label for="m_ssid" data-trans="network_name"></label>
                                    <i class="colorRed">*</i>
                                </span>
                                <div class="span4">
                                    <input type="text" name="m_ssid" data-bind="value: m_ssid" id="m_ssid" class="required form-control" maxlength="32" />
                                </div>
                            </div>
                            <div class="row-fluid">
                                <label class="span5 side-right" data-trans="network_name_broadcast"></label>
                                <div class="span4 side-left">
                                    <div class="span5">
                                        <input type="radio" name="m_show_network_name_switch" id="m_show_network_name_switch_enable" data-bind="checked: m_broadcast" value="0" />
                                        <label for="m_show_network_name_switch_enable" data-trans="enable"></label>
                                    </div>
                                    <div class="span5">
                                        <input type="radio" name="m_show_network_name_switch" id="m_show_network_name_switch_disable" data-bind="checked: m_broadcast" value="1" />
                                        <label for="m_show_network_name_switch_disable" data-trans="disable"></label>
                                    </div>

                                    <input style="display:none;" id="mBroadcastCheckbox" name="mBroadcastCheckbox" type="checkbox" data-bind="checked: m_broadcast() == '0'" value="1" />
                                </div>
                            </div>
                            <div class="row-fluid" data-bind="visible: showIsolated">
                                <label class="span5 side-right"></label>
                                <div class="span4">
                                    <p class="checkbox" data-bind="css:{'checkbox_selected': m_apIsolation() == 1}">
                                        <input id="mApIsolatedCheckbox" name="mApIsolatedCheckbox" type="checkbox" data-bind="checked: m_apIsolation() == 1" value="1" />
                                    </p>
                                    <label data-trans="wifi_isolated_desc"></label>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <label class="span5 side-right" for='m_mode' data-trans='security_mode'></label>
                                <div class="span4">
                                    <select data-transid='security_mode' id="m_mode" class="form-control" data-bind="options: m_modes, value: m_selectedMode, optionsText: transOption('security_mode'), optionsValue: 'value'"></select>
                                </div>
                            </div>
                            <div class="row-fluid" data-bind='visible: m_selectedMode() == "OPEN" && hasWifiWep'>
                                <label class="span5 side-right" for='m_selEncryptType' data-trans='ap_station_encrypt_type'></label>
                                <div class="span4">
                                    <select id="m_selEncryptType" class="form-control" data-bind="value: m_encryptType,optionsValue: 'value'">
                                        <option value="NONE" data-trans="ap_station_encrypt_type_none"></option>
                                        <option value="WEP" data-trans="ap_station_encrypt_type_wep"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="row-fluid" data-bind='visible:  (m_selectedMode() == "OPEN" && m_encryptType() == "WEP" && hasWifiWep) || (m_selectedMode() == "SHARED" && hasWifiWep)'>
                                <label class="span5 side-right" for='m_selWepKeyType' data-trans='ap_station_wep_default_key'></label>
                                <div class="span4">
                                    <select id="m_selWepKeyType" class="form-control" data-bind="value: m_keyID,optionsValue: 'value', event:{ change: profileChangeHandler}">
                                        <option value="0" data-trans="ap_station_wep_key_0"></option>
                                        <option value="1" data-trans="ap_station_wep_key_1"></option>
                                        <option value="2" data-trans="ap_station_wep_key_2"></option>
                                        <option value="3" data-trans="ap_station_wep_key_3"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="row-fluid" data-bind='visible: (m_selectedMode() == "OPEN" && m_encryptType() == "WEP" && hasWifiWep) || (m_selectedMode() == "SHARED" && hasWifiWep)'>
                                <label class="span5 side-right" for='m_pwdWepKey' data-trans='ap_station_wep_key'></label>
                                <div class="span4">
                                    <input id='m_pwdWepKey' name="m_pwdWepKey" type="password" class="required form-control" data-bind="value: m_wepPassword,visible:!m_showPassword()" maxlength='26' />
                                    <input id='m_txtWepKey' name="m_txtWepKey" type="text" class="required form-control" data-bind="value: m_wepPassword,visible:m_showPassword()" maxlength='26' />
                                    <div class="margin-top-10">
                                        <p class="checkbox" data-bind="css:{'checkbox_selected': m_showPassword()}, click: m_showPasswordHandler" manualControl="true">
                                            <input id="m_showWepPassword" type="checkbox" data-bind="checked:m_showPassword" />
                                        </p>
                                        <label class="floatleft margintop5 lineheight25" for="m_showWepPassword" data-trans="display_password" />
                                    </div>
                                    <div id="m_lblShowWepPassword" class="clear"></div>
                                </div>
                            </div>
                            <div id="passwordContainer" class="row-fluid" data-bind='visible: m_selectedMode() == "WPA2PSK" || m_selectedMode() == "WPAPSKWPA2PSK"'>
                                <span class="span5 side-right">
                                    <label for='m_pass' data-trans='pass_phrase'></label>
                                    <i class="colorRed">*</i>
                                </span>

                                <div class="span4 side-left">
                                    <input id='m_pass' name="m_pass" type="password" data-bind="value: m_passPhrase,visible:!m_showPassword()" class="required form-control" minlength='8' maxlength='63' />
                                    <input id='m_passShow' name="m_passShow" type="text" data-bind="value: m_passPhrase,visible:m_showPassword()" class="required form-control" minlength='8' maxlength='63' />
                                    <div class="margin-top-10">
                                        <p class="checkbox" data-bind="css:{'checkbox_selected': m_showPassword()}, click: m_showPasswordHandler" manualControl="true">
                                            <input id="m_showPassword" type="checkbox" data-bind="checked:m_showPassword" />
                                        </p>
                                        <label class="lineheight25 margintop5" data-trans="display_password"></label>
                                    </div>
                                    <div id="m_lblShowPassword" class="clear"></div>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <label class="span5 side-right"></label>
                                <div class="span4">
                                    <div class="margin-top-10" data-bind="visible: showQRSwitch">
                                        <p class="checkbox" data-bind="css:{'checkbox_selected': showMQR()}, click: showMQRHandler" manualControl="true">
                                            <input id="showMQR" type="checkbox" data-bind="checked:showMQR" />
                                        </p>
                                        <label class="lineheight25 margintop5" data-trans="display_QR"></label>
                                    </div>
                                    <div id="h_qrcode" data-bind="visible: showMQRCode">
                                        <img src="./img/blacktrans.png" width="111" id="qrcode_img" data-bind="attr: {src: mqrcodeSrc}" />
                                    </div>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <label class="span5 side-right" for="m_maxStation" data-trans="max_station_number"></label>

                                <div class="span4">
                                    <select name="m_maxStation" id="m_maxStation" class="form-control" data-bind="options: m_maxStations, value: m_selectedStation, optionsText: 'text', optionsValue: 'value'"></select>
                                </div>
                            </div>
                        </div>
                        <div class="form-buttons">
                            <input id="ssid2_apply" type="submit" class="btn-1 btn-primary" data-trans='apply' data-bind="disable: (adBand()=='b' && adMode() == '2' && m_selectedMode() == 'SHARED') || (adBand()=='b' && adMode() == '2' && m_selectedMode() == 'OPEN' && m_encryptType() == 'WEP')"
                            />
                            <input id="ssid2_cancel" type="button" class="btn-1" data-bind='click: function(){clear("ssid2");}' data-trans='cancel' />
                        </div>
                    </form>
                </div>
                <div class="form-note">
                    <div class="notes-title">&nbsp;</div>
                    <ul class="notes-content">
                        <li data-bind="visible: hasMultiSSID" data-trans="wifi_basic_note_multi_ssid_switch"></li>
                        <li data-trans="wifi_basic_note_network_name"></li>
                        <li data-trans="wifi_basic_note_broadcast"></li>
                        <li data-trans="wifi_basic_note_security_mode"></li>
                        <li class="no-style">
                            <ul>
                                <li data-trans="wifi_basic_note_no_encryption"></li>
                                <li data-bind='visible: hasWifiWep' data-trans="wifi_basic_note_shared"></li>
                                <li data-trans="wifi_basic_note_wpa_psk_aes"></li>
                                <li data-trans="wifi_basic_note_wpa_psk"></li>
                            </ul>
                        </li>
                        <li data-trans="wifi_basic_note_pass_phrase"></li>
                        <li data-trans="wifi_basic_note_max_station_number"></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function() {
        var service = window._service;
        var config = service.config;

        /*当前是否WiFi连接*/
        var isWifi = false;
        /**
         * 生成安全模式选项
         * @attribute {array} securityModes 
         */
        var securityModes = _.map(config.WIFI_WEP_SUPPORT ? config.AUTH_MODES_WEP : config.AUTH_MODES, function(item) {
            return new Option(item.name, item.value);
        });
        /**
         * 生成最大接入数选项
         * @method {array} maxStationOption 
         */
        function maxStationOption(max) {
            var options = [];
            for (var i = 1; i <= max; i++) {
                options.push(new Option(i, i));
            }
            return options;
        }

        /**
         * wifi basic view model
         * @class WifiBasicVM
         */
        function WifiBasicVM() {
            var self = this;
            var info = getWifiBasic();
            var advanceInfo = service.getWifiAdvance();
            self.adBand = ko.observable(advanceInfo.wifiBand);
            self.adMode = ko.observable(advanceInfo.mode);
            self.showQRSwitch = config.WIFI_SUPPORT_QR_CODE && config.WIFI_SUPPORT_QR_SWITCH;
            self.showQR = ko.observable(info.show_qrcode_flag);
            self.showMQR = ko.observable(info.m_show_qrcode_flag);
            if (config.WIFI_SUPPORT_QR_SWITCH) {
                self.showQRCode = ko.observable(config.WIFI_SUPPORT_QR_CODE && self.showQR());
                self.showMQRCode = ko.observable(config.WIFI_SUPPORT_QR_CODE && self.showMQR());
            } else {
                self.showQRCode = ko.observable(config.WIFI_SUPPORT_QR_CODE);
                self.showMQRCode = ko.observable(config.WIFI_SUPPORT_QR_CODE);
            }
            self.qrcodeSrc = './img/qrcode_ssid_wifikey.png?_=' + $.now();
            self.mqrcodeSrc = './img/qrcode_multi_ssid_wifikey.png?_=' + $.now();

            self.origin_ap_station_enable = info.ap_station_enable;
            self.hasWifiSwitch = config.WIFI_SWITCH_SUPPORT;
            self.hasMultiSSID = config.HAS_MULTI_SSID;
            self.showIsolated = config.SHOW_WIFI_AP_ISOLATED;
            self.wifi_enable = ko.observable(info.wifi_enable);
            self.hasAPStation = config.AP_STATION_SUPPORT;
            self.hasWlanMacfilter = config.HAS_BLACK_AND_WHITE_FILTER;
            self.hasWifiWep = config.WIFI_WEP_SUPPORT;

            self.isShowSSIDInfoDiv = ko.observable(false);
            if (config.WIFI_SWITCH_SUPPORT) {
                if (info.wifi_enable == "1") {
                    self.isShowSSIDInfoDiv(true);
                } else {
                    self.isShowSSIDInfoDiv(false);
                }
            } else {
                self.isShowSSIDInfoDiv(true); //如果不支持软开关，整个SSID信息块显示
            }

            self.multi_ssid_enable = ko.observable(info.multi_ssid_enable);
            self.origin_multi_ssid_enable = info.multi_ssid_enable;

            self.maxStationNumber = ko.computed(function() {
                return config.MAX_STATION_NUMBER;
            });

            self.modes = ko.observableArray(securityModes);
            self.selectedMode = ko.observable(info.AuthMode);
            self.passPhrase = ko.observable(info.passPhrase);
            self.showPassword = ko.observable(false);
            self.ssid = ko.observable(info.SSID);
            self.broadcast = ko.observable(info.broadcast == '1' ? '1' : '0');
            self.apIsolation = ko.observable(info.apIsolation == '1' ? '1' : '0');
            self.cipher = info.cipher;
            self.selectedStation = ko.observable(info.MAX_Access_num);
            self.maxStations = ko.observableArray(maxStationOption(info.MAX_Station_num));
            self.encryptType = ko.observable(info.encryptType);
            self.keyID = ko.observable(info.keyID);
            self.wepPassword = ko.observable("");

            self.m_modes = ko.observableArray(securityModes);
            self.m_selectedMode = ko.observable(info.m_AuthMode);
            self.m_passPhrase = ko.observable(info.m_passPhrase);
            self.m_showPassword = ko.observable(false);
            self.m_ssid = ko.observable(info.m_SSID);
            self.m_broadcast = ko.observable(info.m_broadcast == '1' ? '1' : '0');
            self.m_apIsolation = ko.observable(info.m_apIsolation == '1' ? '1' : '0');
            self.m_cipher = info.m_cipher;
            self.m_selectedStation = ko.observable(info.m_MAX_Access_num);
            self.m_maxStations = ko.observableArray(maxStationOption(info.MAX_Station_num));
            self.m_encryptType = ko.observable(info.m_encryptType);
            self.m_keyID = ko.observable(info.m_keyID);
            self.m_wepPassword = ko.observable("");

            self.getWepPassword = function() {
                return self.keyID() == '3' ? info.Key4Str1 : (self.keyID() == '2' ? info.Key3Str1 : self.keyID() == '1' ? info.Key2Str1 : info.Key1Str1);
            }
            self.getMWepPassword = function() {
                return self.m_keyID() == '3' ? info.m_Key4Str1 : (self.m_keyID() == '2' ? info.m_Key3Str1 : self.m_keyID() == '1' ? info.m_Key2Str1 : info.m_Key1Str1);
            }
            self.m_wepPassword(self.getMWepPassword());
            self.wepPassword(self.getWepPassword());
            self.profileChangeHandler = function(data, event) {
                $("#pwdWepKey").parent().find("label[class='error']").hide();
                self.wepPassword(self.getWepPassword());
                return true;
            };

            self.clear = function(option) {
                if (option == "switch") {
                    self.multi_ssid_enable(info.multi_ssid_enable);
                    self.wifi_enable(info.wifi_enable);
                } else if (option == "ssid1") {
                    self.selectedMode(info.AuthMode);
                    self.passPhrase(info.passPhrase);
                    self.ssid(info.SSID);
                    self.broadcast(info.broadcast == '1' ? '1' : '0');
                    self.cipher = info.cipher;
                    self.selectedStation(info.MAX_Access_num);
                    self.apIsolation(info.apIsolation == '1' ? '1' : '0');
                    if (config.WIFI_WEP_SUPPORT) {
                        self.encryptType(info.encryptType);
                        self.keyID(info.keyID);
                        self.wepPassword(self.getWepPassword());
                    }
                } else if (option == "ssid2") {
                    self.m_selectedMode(info.m_AuthMode);
                    self.m_passPhrase(info.m_passPhrase);
                    self.m_ssid(info.m_SSID);
                    self.m_broadcast(info.m_broadcast == '1' ? '1' : '0');
                    self.m_cipher = info.m_cipher;
                    self.m_selectedStation(info.m_MAX_Access_num);
                    self.m_apIsolation(info.m_apIsolation == '1' ? '1' : '0');
                    if (config.WIFI_WEP_SUPPORT) {
                        self.m_encryptType(info.m_encryptType);
                        self.m_keyID(info.m_keyID);
                        self.m_wepPassword(self.getMWepPassword());
                    }
                } else {
                    clearTimer();
                    clearValidateMsg();
                    init();
                }
            };

            /**
             * 检测wps是否开启，最大接入数是否超过最大值。
             *
             * @event checkSettings
             */
            self.checkSettings = function(ssid) {
                var status = getWpsInfo();
                if (ssid == "ssid1" || ssid == "ssid2") {
                    if (ssid == "ssid1") {
                        var accessDevice = service.getStatusInfo().ssid1AttachedNum;
                        if (parseInt(self.selectedStation()) < accessDevice) {
                            showAlert('Extend_accessDevice');
                            return true;
                        }
                    } else {
                        var accessDevice = service.getStatusInfo().ssid2AttachedNum;
                        if (parseInt(self.m_selectedStation()) < accessDevice) {
                            showAlert('Extend_accessDevice');
                            return true;
                        }
                    }
                }

                if (status.wpsFlag == '1') {
                    showAlert('wps_on_info');
                    return true;
                }

                if (config.HAS_MULTI_SSID && info.multi_ssid_enable == "1") {
                    if ((ssid == "ssid1" && parseInt(self.selectedStation()) + parseInt(info.m_MAX_Access_num) > info.MAX_Station_num) ||
                        (ssid == "ssid2" && parseInt(self.m_selectedStation()) + parseInt(info.MAX_Access_num) > info.MAX_Station_num)) {
                        showAlert('multi_ssid_max_access_number_alert', null, [info.MAX_Station_num]);
                        return true;
                    }
                }

                return false;
            };
            self.saveSSID1 = function() {
                if (self.checkSettings("ssid1")) {
                    return;
                }
                showConfirm("Confirmation", 'wifi_disconnect_confirm', function() {
                    self.saveSSID1Action();
                });
            };
            /**
             * 保存SSID1的设置
             *
             * @event saveSSID1
             */
            self.saveSSID1Action = function() {
                showLoading('waiting');
                self.broadcast($("#broadcastCheckbox:checked").length > 0 ? '0' : '1');
                self.apIsolation($("#apisolatedCheckbox:checked").length);
                var params = {};
                params.AuthMode = self.selectedMode();
                params.passPhrase = self.passPhrase();
                params.SSID = self.ssid();
                params.broadcast = self.broadcast();
                params.station = self.selectedStation();
                params.cipher = self.selectedMode() == "WPA2PSK" ? 1 : 2;
                params.NoForwarding = self.apIsolation();
                params.show_qrcode_flag = self.showQR() == true ? 1 : 0;
                if (config.WIFI_WEP_SUPPORT) {
                    if (params.AuthMode == "WPAPSK" || params.AuthMode == "WPA2PSK" || params.AuthMode == "WPAPSKWPA2PSK") {} else if (params.AuthMode == "SHARED") {
                        params.encryptType = "WEP";
                    } else {
                        params.encryptType = self.encryptType();
                    }
                    params.wep_default_key = self.keyID();
                    params.wep_key_1 = info.Key1Str1;
                    params.wep_key_2 = info.Key2Str1;
                    params.wep_key_3 = info.Key3Str1;
                    params.wep_key_4 = info.Key4Str1;
                    var WEPSelect = '0';
                    if (self.wepPassword().length == '5' || self.wepPassword().length == '13') {
                        WEPSelect = '1';
                    } else {
                        WEPSelect = '0';
                    }
                    if (self.keyID() == '1') {
                        params.wep_key_2 = self.wepPassword();
                        params.WEP2Select = WEPSelect;
                    } else if (self.keyID() == '2') {
                        params.wep_key_3 = self.wepPassword();
                        params.WEP3Select = WEPSelect;
                    } else if (self.keyID() == '3') {
                        params.wep_key_4 = self.wepPassword();
                        params.WEP4Select = WEPSelect;
                    } else {
                        params.wep_key_1 = self.wepPassword();
                        params.WEP1Select = WEPSelect;
                    }
                }

                service.setWifiBasic(params, function(result) {
                    if (result.result == "success") {
                        if (isWifi) {
                            setTimeout(function() {
                                successOverlay();
                                setTimeout(function() {
                                    window.location.reload();
                                }, 1000);
                                self.clear();
                            }, 15000);
                        } else {
                            addInterval(function() {
                                var info = getWifiBasic();
                                if (info.wifi_enable == "1") {
                                    successOverlay();
                                    self.clear();
                                }
                            }, 1000);
                        }
                    } else {
                        errorOverlay();
                    }
                });
            };

            self.saveSSID2 = function() {
                if (self.checkSettings("ssid2")) {
                    return;
                }
                showConfirm("Confirmation", 'wifi_disconnect_confirm', function() {
                    self.saveSSID2Action();
                });
            };
            /**
             * 保存SSID2的设置
             *
             * @event saveSSID2
             */
            self.saveSSID2Action = function() {
                showLoading('waiting');
                var params = {};
                params.m_AuthMode = self.m_selectedMode();
                params.m_passPhrase = self.m_passPhrase();
                params.m_SSID = self.m_ssid();
                params.m_broadcast = self.m_broadcast();
                params.m_station = self.m_selectedStation();
                params.m_cipher = self.m_selectedMode() == "WPA2PSK" ? 1 : 2;
                params.m_NoForwarding = self.m_apIsolation();
                params.m_show_qrcode_flag = self.showMQR() == true ? 1 : 0;

                if (config.WIFI_WEP_SUPPORT) {
                    if (params.m_AuthMode == "WPAPSK" || params.m_AuthMode == "WPA2PSK" || params.m_AuthMode == "WPAPSKWPA2PSK") {
                        //params.m_encryptType = self.m_encryptType_WPA();
                    } else if (params.m_AuthMode == "SHARED") {
                        params.m_encryptType = "WEP";
                    } else {
                        params.m_encryptType = self.m_encryptType();
                    }
                    params.m_wep_default_key = self.m_keyID();
                    params.m_wep_key_1 = info.m_Key1Str1;
                    params.m_wep_key_2 = info.m_Key2Str1;
                    params.m_wep_key_3 = info.m_Key3Str1;
                    params.m_wep_key_4 = info.m_Key4Str1;
                    var mWEPSelect = '0';
                    if (self.m_wepPassword().length == '5' || self.m_wepPassword().length == '13') {
                        mWEPSelect = '1';
                    } else {
                        mWEPSelect = '0';
                    }
                    if (self.m_keyID() == '1') {
                        params.m_wep_key_2 = self.m_wepPassword();
                        params.m_WEP2Select = mWEPSelect;
                    } else if (self.m_keyID() == '2') {
                        params.m_wep_key_3 = self.m_wepPassword();
                        params.m_WEP3Select = mWEPSelect;
                    } else if (self.m_keyID() == '3') {
                        params.m_wep_key_4 = self.m_wepPassword();
                        params.m_WEP4Select = mWEPSelect;
                    } else {
                        params.m_wep_key_1 = self.m_wepPassword();
                        params.m_WEP1Select = mWEPSelect;
                    }
                }

                service.setWifiBasic4SSID2(params, function(result) {
                    if (result.result == "success") {
                        if (isWifi) {
                            setTimeout(function() {
                                successOverlay();
                                setTimeout(function() {
                                    window.location.reload();
                                }, 1000);
                                self.clear();
                            }, 15000);
                        } else {
                            addInterval(function() {
                                var info = getWifiBasic();
                                if (info.wifi_enable == "1") {
                                    successOverlay();
                                    self.clear();
                                }
                            }, 1000);
                        }
                    } else {
                        errorOverlay();
                    }
                });
            };

            /**
             * 设置多SSID开关
             *
             * @event setMultiSSIDSwitch
             */
            self.setMultiSSIDSwitch = function() {
                if (self.checkSettings("switch")) {
                    return;
                }

                var setSwitch = function() {
                    showLoading('waiting');
                    var params = {};
                    params.m_ssid_enable = self.multi_ssid_enable();
                    if (config.WIFI_SWITCH_SUPPORT) {
                        params.wifiEnabled = self.wifi_enable();
                    }
                    service.setWifiBasicMultiSSIDSwitch(params, function(result) {
                        if (result.result == "success") {
                            if (isWifi) {
                                setTimeout(function() {
                                    successOverlay();
                                    setTimeout(function() {
                                        window.location.reload();
                                    }, 1000);
                                    service.refreshAPStationStatus();
                                    self.clear();
                                }, 15000);
                            } else {
                                addInterval(function() {
                                    var info = getWifiBasic();
                                    service.refreshAPStationStatus();
                                    if (info.wifi_enable == self.wifi_enable()) {
                                        successOverlay();
                                        self.clear();
                                    }
                                }, 1000);
                            }
                        } else {
                            errorOverlay();
                        }
                    });
                };

                var info = service.getStatusInfo();
                if (config.HAS_MULTI_SSID && self.wifi_enable() == "1") {
                    if (self.multi_ssid_enable() == "1" && config.AP_STATION_SUPPORT && self.origin_ap_station_enable == "1") {
                        if (info.wifiStatus) {
                            showConfirm("Confirmation", "multi_ssid_enable_confirm2", function() {
                                setSwitch();
                            });
                        } else {
                            showConfirm("Confirmation", "multi_ssid_enable_confirm", function() {
                                setSwitch();
                            });
                        }
                    } else {
                        if (info.wifiStatus) {
                            showConfirm("Confirmation", "wifi_disconnect_confirm2", function() {
                                setSwitch();
                            });
                        } else {
                            setSwitch();
                        }
                    }
                } else {
                    setSwitch();
                }
            };

            /**
             * SSID1密码显示事件
             *
             * @event showPasswordHandler
             */
            self.showPasswordHandler = function() {
                $("#pwdWepKey").parent().find(".error").hide();
                $("#pwdWPAKey").parent().find(".error").hide();
                var checkbox = $("#showPassword:checked");
                if (checkbox && checkbox.length == 0) {
                    self.showPassword(true);
                } else {
                    self.showPassword(false);
                }
            };
            /**
             * SSID2密码显示事件
             *
             * @event m_showPasswordHandler
             */
            self.m_showPasswordHandler = function() {
                    $("#m_passShow").parent().find(".error").hide();
                    var checkbox = $("#m_showPassword:checked");
                    if (checkbox && checkbox.length == 0) {
                        self.m_showPassword(true);
                    } else {
                        self.m_showPassword(false);
                    }
                }
                /**
                 * 二维码显示事件
                 *
                 * @event showQRHandler
                 */
            self.showQRHandler = function() {
                var checkbox = $("#showQR:checked");
                if (checkbox && checkbox.length == 0) {
                    self.showQR(true);
                } else {
                    self.showQR(false);
                }
                self.showQRCode(config.WIFI_SUPPORT_QR_CODE && self.showQR());
            }
            self.showMQRHandler = function() {
                var checkbox = $("#showMQR:checked");
                if (checkbox && checkbox.length == 0) {
                    self.showMQR(true);
                } else {
                    self.showMQR(false);
                }
                self.showMQRCode(config.WIFI_SUPPORT_QR_CODE && self.showMQR());
            }
            self.wifiSwitchChange = function() {
                if (self.wifi_enable() == '1') {
                    self.wifi_enable('0');
                    $('#wifi_switch').removeClass().addClass('bg-switch-disable');
                    $('#wifi_switch_text').html($.i18n.prop('disable'));
                } else {
                    self.wifi_enable('1');
                    $('#wifi_switch').removeClass().addClass('bg-switch-enable');
                    $('#wifi_switch_text').html($.i18n.prop('enable'));

                }
            }
            self.broadcastCheckboxChange = function() {
                if (self.broadcast() == '1') {
                    self.broadcast('0');
                    $('#broadcastCheckbox_switch').removeClass().addClass('bg-switch-enable');
                    $('#broadcastCheckbox_switch_text').html($.i18n.prop('enable'));
                } else {
                    self.broadcast('1');
                    $('#broadcastCheckbox_switch').removeClass().addClass('bg-switch-disable');
                    $('#broadcastCheckbox_switch_text').html($.i18n.prop('disable'));

                }
            }
        }

        /**
         * 获取wifi基本信息
         * @method getWifiBasic
         * @return {Object}
         */
        function getWifiBasic() {
            return service.getWifiBasic();
        }

        /**
         * 获取wps信息
         * @method getWpsInfo
         */
        function getWpsInfo() {
            return service.getWpsInfo();
        }

        function checkConnectedDevice() {
            service.getParams({
                nv: 'user_ip_addr'
            }, function(dataIp) {
                service.getParams({
                    nv: 'station_list'
                }, function(dataList) {
                    isWifi = isWifiConnected(dataIp.user_ip_addr, dataList.station_list);
                });
            });
        }
        /**
         * 初始化wifi基本view model
         * @method init
         */
        function init() {
            var container = $('#innerContainer');
            ko.cleanNode(container[0]);
            var vm = new WifiBasicVM();
            ko.applyBindings(vm, container[0]);
            addTimeout(function() {
                checkConnectedDevice();
            }, 600);
            /**
             * 根据APSTATION状态设置界面输入框的可用状态
             * @method checkWifiStatusAccordingToWDS
             */
            function checkWifiStatus() {
                var info = service.getAPStationBasic();
                if (info.ap_station_enable == "1") {
                    $('#frmMultiSSID :input').each(function() {
                        $(this).prop("disabled", true);
                    });
                } else {
                    $('#frmMultiSSID :input').each(function() {
                        $(this).prop("disabled", false);
                    });
                }
            }
            /**
             * 根据当前模式设置界面输入框的可用状态
             * @method checkWifiStatusAccordingToWDS
             */
            function checkWifiStatusAccordingToWDS() {
                var info = service.getWdsInfo();
                if (info.currentMode != "0") {
                    $('#frmWifiSwitch :input').each(function() {
                        $(this).prop("disabled", true);
                    });
                    $('#frmSSID1 :input').each(function() {
                        $(this).prop("disabled", true);
                    });
                    $('#frmSSID2 :input').each(function() {
                        $(this).prop("disabled", true);
                    });
                } else {
                    $('#frmWifiSwitch :input').each(function() {
                        $(this).prop("disabled", false);
                    });
                    $('#frmSSID1 :input').each(function() {
                        $(this).prop("disabled", false);
                    });
                    $('#frmSSID2 :input').each(function() {
                        $(this).prop("disabled", false);
                    });
                }
            }

            if (config.AP_STATION_SUPPORT) {
                checkWifiStatus();
            } else if (config.WDS_SUPPORT) {
                checkWifiStatusAccordingToWDS();
            }
            /*表单提交函数、校验规则配置*/
            $('#frmWifiSwitch').validate({
                submitHandler: function() {
                    vm.setMultiSSIDSwitch();
                }
            });

            $('#frmMultiSSID').validate({
                submitHandler: function() {
                    vm.setMultiSSIDSwitch();
                }
            });
            $('#frmSSID1').validate({
                submitHandler: function() {
                    vm.saveSSID1();
                },
                rules: {
                    ssid: 'ssid',
                    pwdWepKey: {
                        wifi_wep_password_check: true,
                        wifi_password_check: true
                    },
                    txtWepKey: {
                        wifi_wep_password_check: true,
                        wifi_password_check: true
                    },
                    pwdWPAKey: 'wifi_password_check',
                    txtWPAKey: 'wifi_password_check'
                },
                errorPlacement: function(error, element) {
                    var id = element.attr("id");
                    if (id == "pwdWepKey" || id == "txtWepKey") {
                        error.insertAfter("#lblShowWepPassword");
                    } else if (id == "pwdWPAKey" || id == "txtWPAKey") {
                        error.insertAfter("#lblshowWPAPassword");
                    } else {
                        error.insertAfter(element);
                    }
                }
            });
            $('#frmSSID2').validate({
                submitHandler: function() {
                    vm.saveSSID2();
                },
                rules: {
                    m_ssid: 'ssid',
                    m_pass: 'wifi_password_check',
                    m_passShow: 'wifi_password_check'
                },
                errorPlacement: function(error, element) {
                    var id = element.attr("id");
                    if (id == "pass" || id == "passShow") {
                        error.insertAfter("#lblShowPassword");
                    } else if (id == "m_pass" || id == "m_passShow") {
                        error.insertAfter("#m_lblShowPassword");
                    } else {
                        error.insertAfter(element);
                    }
                }
            });
        }

        init();
        $('#innerContainer').translate();
    });
</script>